<template>
    <div ref="ech" id="box">
    </div>
</template>

<script>
import * as echarts from "echarts";
export default {
    props:{
    },
    data() {
        return {};
    },
    methods: {
        handleSearch() {
            // 三 局部使用
            // 1 初始化echarts,获取dom元素
            let myChart = echarts.init(this.$refs.ech);
            // 2 配置图表和数据
            let option = {
                color: ["#2f89cf"],
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: "0%",
                    top: "10px",
                    right: "0%",
                    bottom: "4%",
                    containLabel: true
                },
                xAxis: [
                    {
                        type: "category",
                        data: [
                            "旅游行业",
                            "教育培训",
                            "游戏行业",
                            "医疗行业",
                            "电商行业",
                            "社交行业",
                            "金融行业"
                        ],
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            textStyle: {
                                color: "rgba(255,255,255,.6)",
                                fontSize: "12"
                            }
                        },
                        axisLine: {
                            show: false
                        }
                    }
                ],
                yAxis: [
                    {
                        type: "value",
                        axisLabel: {
                            textStyle: {
                                color: "rgba(255,255,255,.6)",
                                fontSize: "12"
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: "rgba(255,255,255,.1)"
                                // width: 1,
                                // type: "solid"
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: "rgba(255,255,255,.1)"
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: "直接访问",
                        type: "bar",
                        barWidth: "35%",
                        data: [200, 300, 300, 900, 1500, 1200, 600],
                        itemStyle: {
                            barBorderRadius: 5
                        }
                    }
                ]
            };
            // 3 将配置好的图表加到dom元素上面
            myChart.setOption(option);

            // 4 图表的响应式.嵌套宽度必须设置%
            window.addEventListener("resize",()=>{
                myChart.resize();
            })
        },
    },
    mounted() {
        this.$nextTick(()=>{
            this.handleSearch();
        })
    },
}
</script>

<style>
#box {
    height: 100%;
    width: 100%;
}
</style>